<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 500px;
            background-color: aliceblue;
        }

        .mask {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;

            background-color: #000;
            opacity: 0.5;
            color: #fff;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        #modal{
            position: absolute;
            width: 200px;
            height: 200px;

            background-color: skyblue;
        }
    </style>
</head>

<!-- 
    链接：https://cn.vuejs.org/guide/built-ins/teleport.html#multiple-teleports-on-the-same-target

    <Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
    这类场景最常见的例子就是全屏的模态框。
 -->

<body>
    <div id="app"></div>
    <div id="modal"></div>
</body>
<script src="js/vue.js"></script>
<script>

    const app = Vue.createApp({
        data() {
            return {
                msg: 'teleport 使用',
                isShow: false,
            }
        },
        methods: {
            btnClick() {
                this.isShow = !this.isShow;
            }
        },
        template: `
        <div class="box">
            <button @click="btnClick">蒙版</button>
           <!--  <div class="mask" v-show="isShow">{{msg}}</div>  -->

           <!-- to 属性可以实现将当前的蒙版指定展示到对应的 dom 元素上面 -->
           <!--
            <teleport to="body">
                <div class="mask" v-show="isShow">{{msg}}</div>
            </teleport>
            -->
            

            <teleport to="#modal">
                <div class="mask" v-show="isShow">{{msg}}</div>
            </teleport>
        </div>
        `,
    }).mount("#app");

</script>

</html>